import { forwardRef, useEffect, useState } from 'react';
import {
  Form,
  Input,
  Select
} from 'antd';
import { http } from '@/utils/http';
const { Option } = Select;

// 引用传递高阶forwardRef是一种通过组件向子组件自动传递引用ref的技术，由于某些input被包裹在组件中，这时需要使用forwardRef来透过组件获得该input的引用，可以透传多层。
const UserForm = forwardRef((props, ref) => {
  const [regions, setRegions] = useState([])  // 区域数据
  const [roleList, setRoleList] = useState([])  // 角色列表数据

  // 获取区域数据
  const getRegionList = async () => {
    const { data } = await http.get('/regions')
    data.forEach(item => {
      item.label = item.title
      delete item.title
    })
    setRegions(data)
  }

  // 获取角色列表
  const getRoleList = async () => {
    const { data } = await http.get('/roles')
    setRoleList(data)
  }

  useEffect(() => {
    getRegionList()
    getRoleList()
  }, [])

  // 从Token中拿到当前用户对应的角色ID
  const { roleId, region } = JSON.parse(window.sessionStorage.getItem('news'))
  const roleObj = {
    "1": "superadmin",
    "2": "admin",
    "3": "editor"
  }

  // 是否禁用区域下拉框Option
  const checkRegionDisabled = item => {
    if (props.isUpdate) {  // 更新的表单
      if (roleObj[roleId] === 'superadmin') {
        // 超级管理员
        return false
      } else {
        // 区域管理员
        return item.value !== region
      }
    } else {  // 添加的表单
      if (roleObj[roleId] === 'superadmin') {
        // 超级管理员
        return false
      } else {
        // 区域管理员
        ref.current.setFieldValue('region', region)
        return item.value !== region
      }
    }
  }

  // 是否禁用角色下拉框Option
  const checkRoleDisabled = item => {
    if (props.isUpdate) {  // 更新的表单
      if (roleObj[roleId] === 'superadmin') {
        // 超级管理员
        return false
      } else {
        // 区域管理员
        return true
      }
    } else {  // 添加的表单
      if (roleObj[roleId] === 'superadmin') {
        // 超级管理员
        return false
      } else {
        // 区域管理员
        ref.current.setFieldValue('roleId', 3)
        return roleObj[item.id] !== "editor"
      }
    }
  }

  return (
    <Form
      ref={ref}
      layout="vertical"
      name="form_in_modal"
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名！',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '请设置密码！',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={[
          {
            // 禁用状态下 此项不是必填项
            required: !props.isDisabled,
            message: '请选择区域！',
          },
        ]}
      >
        <Select
          style={{
            width: '100 %',
          }}
          disabled={props.isDisabled}
        >
          {
            regions.map(item => {
              return <Option disabled={checkRegionDisabled(item)} key={item.id} value={item.value}>{item.title}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: '请选择角色！',
          },
        ]}
      >
        <Select
          style={{
            width: '100 %',
          }}
          onChange={value => {
            if (value === 1) {
              props.setIsDisabled(true)
              ref.current.setFieldValue('region', '')
            } else props.setIsDisabled(false)
          }}
        >
          {
            roleList.map(item => {
              return <Option disabled={checkRoleDisabled(item)} key={item.id} value={item.id}>{item.roleName}</Option>
            })
          }
        </Select>
      </Form.Item>
    </Form>
  )
})
export default UserForm;